<template>
    <popup
        class="mr-2 inline"
        width="800px"
        :clickModalClose="false"
        title="转账"
        @confirm="handleconfirm"
    >
        <template #trigger>
            <el-link type="primary" :underline="false">{{ title }}</el-link>
        </template>

        <div class="ml-6">
            <el-form
                :model="formData"
                label-width="120px"
                class="w-[540px]"
                :rules="formRules"
                ref="formRef"
            >
                <el-form-item label="转账操作" prop="transferpass">
                    <el-radio-group v-model="transferpass" class="ml-4">
                        <el-radio label="1">转账通过</el-radio>
                        <el-radio label="2">转账拒绝</el-radio>
                    </el-radio-group>
                    <div class="form-tips">转账失败后，提现金额会全部退回佣金账户</div>
                </el-form-item>
                <el-form-item label="转账凭证" prop="withdrawpass">
                    <div>
                        <material-picker v-model="formData.transfer_voucher" />
                        <div class="form-tips">建议尺寸：400*400像素，支持jpg，jpeg，png格式</div>
                    </div>
                </el-form-item>
                <el-form-item label="转账说明" prop="name">
                    <el-input
                        :rows="3"
                        type="textarea"
                        placeholder="请输入转账说明"
                        show-word-limit
                        maxlength="20"
                        v-model="formData.transfer_remark"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>

<script lang="ts" setup>
import { transferFail, transferSuccess, withdrawList } from '@/api/finance'
import Popup from '@/components/popup/index.vue'
const props = withDefaults(
    defineProps<{
        id: string | number
        title: string
    }>(),
    {
        id: '',
        title: ''
    }
)
const transferpass = ref('1')
const formData = ref<any>({
    id: props.id,
    transfer_remark: '',
    transfer_voucher: ''
})
const formRules = {
    transferpass: [
        {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
        }
    ]
}
const handleconfirm = async () => {
    if (transferpass.value == '1') {
        await transferSuccess(formData)
    }
    await transferFail(formData)
    await withdrawList()
}
</script>

<style lang="scss" scoped>
// todo
:deep(.el-dialog__footer) {
    text-align: center;
}
</style>
